<template>
  <div class="content-box">
    <a-row>
      <a-col :span="4" v-for="(item,ind) in tabs" :key="ind" >
        <router-link :to="{name:item.pathName}">
            <div class="tabbox" :style='styleObject(ind)' >
                <p><a-icon :type="item.icon" /></p>
                <p>{{item.title}}</p>
                <p>{{item.value}}</p>
            </div>
        </router-link>
      </a-col>
    </a-row>
    <a-row :gutter="[20,20]">
      <a-col :span="12">
        <div class="col">
            <p  class="title">待处理</p>
            <a-row>
                <a-col :span="12">
                    <div class="col2">
                        <div class="lines">
                            <div class="icon">
                                <a-icon  type="container" />
                            </div>
                            <div class="cont">
                                <p>待确认订单</p> 
                                <p class="value" @click="popModal">18</p>
                            </div>
                        </div>
                    </div>
                </a-col>
                <a-col :span="12">
                    <div class="col2"> 
                        <div>
                            <div class="icon">
                                <a-icon  type="container" />
                            </div>
                            <div class="cont">
                                <p>待配送订单</p> 
                                <p class="value">18</p>
                            </div>
                        </div>
                    </div>
                </a-col>
            </a-row>
        </div>
      </a-col>
      <a-col :span="12">
        <div class="col">
            <p  class="title">库存有效期提醒</p>
            <a-row>
                <a-col :span="12">
                    <div class="col2">
                        <div class="lines">
                            <div class="icon">
                                <a-icon  type="container" />
                            </div>
                            <div class="cont">
                                <p>即将过期库存</p> 
                                <p class="value">18</p>
                            </div>
                        </div>
                    </div>
                </a-col>
                <a-col :span="12">
                    <div class="col2"> 
                        <div>
                            <div class="icon">
                                <a-icon  type="container" />
                            </div>
                            <div class="cont">
                                <p>已过期库存</p> 
                                <p class="value">18</p>
                            </div>
                        </div>
                    </div>
                </a-col>
            </a-row>
        </div>
      </a-col>
    </a-row>

    <a-row :gutter="[20,20]">
        <a-col :span="14">
            <div class="tbox">
                <p  class="title">证照有效期提醒</p>
                1
            </div>
        </a-col>
        <a-col :span="10">
            <div class="tbox">
                <p  class="title">证照总体情况</p>
                2
            </div>
        </a-col>
    </a-row>   
    <basic-modal 
    :modalOpt="modal1"
    @closeModal="closeModal">
        <template>
            <basic-form 
            :formInfos="formInfos"
            :formDatas="formDatas"
            @onChangeType="onChangeType"
            ></basic-form>
        </template>
    </basic-modal>

    
  </div>
</template>

<script>
import basicForm from '@/views/app/biz/common/basicForm'
import basicModal from '@/views/app/biz/common/basicModal'
const formInfos1=[
        {label:'证件类型',name:'ctftype',type:'radio',placeholder:'',options:[{id:'1',value:'注册证'},{id:'2',value:'备案证'},{id:'3',value:'消毒证'}]},
        {label:'平台订单号1',name:'oid',type:'input',placeholder:'请输入'},
        {label:'省',name:'adress1',type:'select',placeholder:'请选择',options:[{id:'1',value:'四川'},{id:'2',value:'陕西'}],link:'1'},
        {label:'市',name:'adress2',type:'select',placeholder:'请选择',options:[{id:'1',value:'成都'},{id:'2',value:'泸州'}],link:'2'},
        {label:'时间段',name:'times',type:'datarange'},
        {label:'创建日期',name:'time',type:'datatime',},
        {label:'a2',name:'select1',type:'select',placeholder:'请选择',options:[{id:'0',value:'所有'},{id:'1',value:'a'},{id:'2',value:'b'}]},
        {label:['查询','重置'],type:'botton'}
      ]
const formDatas1={
        ctftype:"1",
        oid:'',
        adress1:'',
        adress2:'',
        times:[null,null],
        time:null,
        select1:''
      }
let formInfos2=[
    {label:'证件类型',name:'ctftype',type:'radio',placeholder:'',options:[{id:'1',value:'注册证'},{id:'2',value:'备案证'},{id:'3',value:'消毒证'}]},
    {label:'平台订单号1',name:'oid',type:'input',placeholder:'请输入'},
    {label:'地址',name:'adress1',type:'select',placeholder:'请选择',options:[{id:'1',value:'四川'},{id:'2',value:'陕西'}],link:'1'},
    {label:'时间段',name:'times',type:'datarange'},
    {label:['有效期','到'],name:['startTime','endTime'],type:'datatimeR',},
    {label:'a2',name:'select1',type:'select',placeholder:'请选择',options:[{id:'0',value:'所有'},{id:'1',value:'a'},{id:'2',value:'b'}]},
    {label:'经营范围',name:'scope',type:'textarea',placeholder:'请输入'},
    {label:['查询','重置'],type:'botton'}
]
let formDatas2={
    ctftype:"2",
    oid:'',
    adress1:undefined,
     times:[null,null],
    startTime:null,
    endTime:null,
    select1:undefined,
    scope:"222222"
}  
let formInfos3=[
    {label:'证件类型',name:'ctftype',type:'radio',placeholder:'',options:[{id:'1',value:'注册证'},{id:'2',value:'备案证'},{id:'3',value:'消毒证'}]},
    {label:'平台订单号1',name:'oid',type:'input',placeholder:'请输入'},
    {label:'a2',name:'select1',type:'select',placeholder:'请选择',options:[{id:'0',value:'所有'},{id:'1',value:'a'},{id:'2',value:'b'}]},
    {label:'经营范围',name:'scope',type:'textarea',placeholder:'请输入'},
    {label:['查询','重置'],type:'botton'}
]
let formDatas3={
    ctftype:"3",
    oid:'',
    select1:undefined,
    scope:"红红火火恍恍惚惚"
}     
export default {
    components:{
        basicForm,
        basicModal
    },
    props:{
        tabs:{
            type:Array,
            default:()=>{
                return [
                    {icon:"edit",title:'证照未推送',pathName:"basicTable",value:"16"},
                    {icon:"database",title:'品种未维护证照',pathName:"basicTable",value:"136"},
                    {icon:"bank",title:'生产企业未维护证照',pathName:"basicTable",value:"126"},
                    {icon:"compass",title:'证照未审核',pathName:"basicTable",value:"0"},
                    {icon:"highlight",title:'证照已驳回',pathName:"basicTable",value:"1"},
                    {icon:"contacts",title:'厂家授权书未关联注册证',pathName:"basicTable",value:"6"},
                ]
            }
        }
    },
    data(){
        return{
            tabarr:{},
            colors:["#068df6","#229fff","#3caaff","#5cb8ff","#80c8ff","#a2d7ff"],
            formInfos:formInfos2,
            formDatas:formDatas2,
            modal1:{
                modalVisible:false,
                modalTitle:'查看详情',
                modalWidth:'1080px'
            },
        }
    },
    computed:{
        styleObject() {
            return (ind)=>{
                return {
                    "--background-color": this.colors[ind],
                    "--background-color-hover": " #0073e6",
                };
            }
        },
    },
    methods:{
        popModal(){
            this.modal1.modalVisible=true
        },
        closeModal(){
            this.modal1.modalVisible=false
        },
        onChangeType(name,val){
            console.log(val);
            if(val==1){
                formDatas1[name]=val
                this.formInfos=formInfos1
                this.formDatas=formDatas1
            }else if(val==2){
                formDatas2[name]=val
                this.formInfos=formInfos2
                this.formDatas=formDatas2
            }else{
                formDatas3[name]=val
                this.formInfos=formInfos3
                this.formDatas=formDatas3
            }
            
        }
    }
}
</script>

<style scoped>
/* :style="{ backgroundColor: colors[ind]}" */

.content-box {
  background-color: #fff;
}
.tabbox{
    height: 164px;
    width: 100%;
    background-color: var(--background-color);
    color: #fff;
    text-align: center;
    padding-top: 10px;
}

.tabbox:hover{
    background-color:var(--background-color-hover);
}
.tabbox p{
    margin-bottom: 0px;
}
.tabbox p:first-child{
    font-size:58px;
}
.tabbox p:nth-child(3){
    font-size:20px;
    color: #ffea00;
    
}
.col {
  height: 162px;
  border: 1px solid #ddd;
  font-size: 16px;
}
.title{
    line-height: 40px;
    padding-left: 38px;
    color: #333333;
    background-color: #e6ebf2;
    margin-bottom: 0;
}
.col2{
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.lines{
    border-right:1px solid #ddd;
}
.col2>div:first-child{
    height: 48px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.icon{
    font-size: 40px;
    color: seagreen;
}
.cont{
    height: 48px;
}
.cont p{
    height: 24px;
    margin: 0px;
}
.value{
    font-size:20px;
    color: #fc7d00;
}
.tbox{
    border: 1px solid #ddd;
}
</style>